<template>
  <div class="rolePrivilege-wrapp">
    <div class="role-box">
      <div class="role-list-box">
          <h1 class="title-box">角色列表</h1>
          <div class="role-list role">
             <el-menu :unique-opened="true">
              <el-submenu :index="role_group.rolegroup" v-for="(role_group,key) in rolegroup">
                <template slot="title">
                  <i class="iconfont icon-yonghuguanli role_iconfontColor"></i>
                  <span>{{role_group.rolegroup}}</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item :index="role.rolename" v-for="role in role_group.roleDtoTwos" @click="role_click(role.roleid)">{{role.rolename}}</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          <!--   <ul>
              <li v-for="item in roleList" @click="role_click(item.roleid)">{{item.rolename}}</li>
            </ul>
 -->
          </div>
          <div class="role_boxAddrole">
            <el-input v-model="roleName" size="mini"><el-button slot="append" @click="add_role">添加角色</el-button></el-input>
          </div>
        </div>
      <div class="centerBig_box">
          <h1 class="title-box">菜单权限</h1>
          <el-alert v-if="limitList.length==0"
            title="暂无数据"
            type="warning"
            center
            show-icon
            :closable="false">
          </el-alert>
          <div class="role-list">
           <div class="parent-box" v-for="(item,key) in limitList">
              <h2>{{item.menuname}}
                <el-switch class="switch_box fr"
                  v-model="item.status"
                  :active-value='1'
                  :inactive-value='0'
                  active-color="#71d189"
                  active-text="启用"
                  inactive-text="禁用">
                </el-switch>
              </h2>
              <div class="child-box" v-for="child in item.childs">
                {{child.childmenuname}}
                <el-switch class="switch_box fr"
                  v-model="child.status"
                  active-color="#71d189"
                  :active-value='1'
                  :inactive-value='0'
                  active-text="启用"
                  inactive-text="禁用">
                </el-switch>
              </div>
            </div>
          </div>
        </div>
        <div class="centerBigBox2">
          <h1 class="title-box" >报表模型</h1>
          <el-alert v-if="reportModel.length==0"
            title="暂无数据"
            type="warning"
            center
            show-icon
            :closable="false">
          </el-alert>
          <div class="role-list">
              <div class="parent-box" v-for="rm in reportModel">
                <h2>{{rm.name}}
                  <el-switch class="switch_box fr"
                    v-model="rm.status"
                    active-color="#71d189"
                    :active-value='1'
                    :inactive-value='0'
                    active-text="启用"
                    inactive-text="禁用">
                  </el-switch>
                </h2>
             </div>
          </div>
        </div>
        <div class="rightBigBox">
          <h1 class="title-box" >模板权限</h1>
          <el-alert v-if="templateData.length==0"
            title="暂无数据"
            type="warning"
            center
            show-icon
            :closable="false">
          </el-alert>
          <div class="role-list">
              <div class="parent-box" v-for="temp in templateData">
                <h2>{{temp.procName}}
                <el-switch class="switch_box fr"
                  v-model="temp.status"
                  active-color="#71d189"
                  :active-value='1'
                  :inactive-value='0'
                  active-text="启用"
                  inactive-text="禁用">
                </el-switch>
                </h2>
              </div>
          </div>
        </div>
        <div class="bottomBox">
            <el-button type="primary" style="width:150px" @click="save" :disabled="(limitList.length===0)">保存</el-button>
        </div>
    </div>
    <add-role v-if="dialogVisible" :submitFu="submitFu" :dialogVisible.sync="dialogVisible" :params="role_params"></add-role>
  </div>
</template>
<script>
import addRole from './components/add-role'
export default {
  components:{
    addRole
  },
  data(){
    return{
      rolegroup:[],
      roleList:[],
      limitList:[],
         value7:[],
       RoleMenu:[],
       roleids:'',
        companyids:this.$store.getters.companyId,
       templateData:[],
       reportModel:[],
       ctUserId:this.$store.getters.userUid,
       roleName:'',
       dialogVisible:false,
       role_params:{
        name:'',
        group:''
       },
       tree_data:''
    }
  },
  methods:{
    menu_click(v){
      console.log(v)
    },
    submitFu(val){
      this.$post("/role/savaRole",val,(data)=>{
        this.dialogVisible=false;
        this.$message({
            type: 'success',
            message: '添加角色成功!',
            callback:this.get_rolelist()
          });
         },(err)=>{
          this.$message.error(err);
      });
    },
    add_role(){
      this.dialogVisible = true;
      this.role_params.name = this.roleName;
      // alert(this.roleName)
    },
    get_rolelist(){
      this.$post("/role/getRoleList",{companyid:this.companyids},data => {
        this.role_params.group = data;
        this.rolegroup = data;
        for(let key in data){
          for(let keys in data[key].roleDtoTwos){
            this.roleList.push(data[key].roleDtoTwos[keys])
          }
        }
      },error => {
      });
    },
    role_click(rid){
      this.roleids = rid;
      this.$post("/menu/getMenuinfoChildList",{roleid:rid},data => {
           this.limitList = data;
           this.$post("/roleProc/getRoleProc",{roleId:rid,companyId:this.companyids},data => {
               this.templateData = data;
             },error => {
           });
           this.$post("/roleReport/getroleReport",{roleId:rid,companyId:this.companyids},data => {
               this.reportModel = data;
             },error => {
           });
        },error => {
          alert(error);
      });

      // this.$post("/roleProc/getRoleProc",{roleId:rid,companyId:this.companyids},data => {
      //     this.templateData = data;
      //   },error => {
      // });

    },
    save(){
      let roleId = this.roleids;
      let addMenuIds=[];
      let addButIds =[];
      let addRoleProcDtos=[];
      let addRoleReportDtos=[];
       for(let key in this.limitList){     //获取选中的菜单id
         if(this.limitList[key].status===1)
         {
            let menuParams = {
              "ctUserId": this.ctUserId,
              "menuId":this.limitList[key].menuid,
              "roleId":this.roleids
            }
            addMenuIds.push(menuParams);
         }
         for(let keys in this.limitList[key].childs){
           if(this.limitList[key].childs[keys].status === 1){
             let butParams = {
               childId:this.limitList[key].childs[keys].childid,
               companyId:this.companyids,
               ctUserId: this.ctUserId,
               menuId:this.limitList[key].childs[keys].menuid,
               roleId:this.roleids
             }
             addButIds.push(butParams);
           }
         }
       }
       for(let key in this.templateData){
         if(this.templateData[key].status===1)
         {
           let template = {
              companyId:this.companyids,
              ctUserId:this.ctUserId,
              procId:this.templateData[key].id,
              roleId:this.roleids
           }
           addRoleProcDtos.push(template);
         }
       }
       for(let key in this.reportModel){
         if(this.reportModel[key].status===1)
         {
           let ReportDtos = {
              companyId:this.companyids,
              ctUserId:this.ctUserId,
              reportId:this.reportModel[key].id,
              roleId:this.roleids
           }
           addRoleReportDtos.push(ReportDtos);
         }
       }
       this.$post("/roleMenu/savaRoleMenuInfo",{
         "addChildIds":addButIds,
         "addMenuIds":addMenuIds,
         "addRoleProcDtos":addRoleProcDtos,
         "addRoleReportDtos":addRoleReportDtos,
         "roleId":roleId,
         "companyId":this.companyids
       },data => {
         this.$message({
             message:"保存成功！",
             type:"success"
           })
         },error => {
           alert(error)
       });

    }
  },
  computed: {
    evenLimitlist() {
          return this.limitList.filter(function (number) {
            number.status = !!number.status;
            return number;
          })
      },
    evenSaveData(){
        return this.limitList.filter(function (number) {
           if(number.status === 1){
             return number.menuname;
           }
        })
    }
},
  created(){

    this.get_rolelist();
  }
}
</script>
<style lang="scss">
.role_boxAddrole{
  .el-input-group__append{
      background:#2c72db;
      color:#fff;
      border:1px solid #2c72db;
    }
}
.el-menu-item.is-active{
  background-color:#ecf5ff;
}
.el-menu{
  border-right:0;
}
</style>
<style lang="scss" scoped>
  @import './style.scss';
</style>
